<template>
  <div id="mainExpSta">
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: rgb(52, 69, 99);
      "
    >
      维修量统计
    </h1>
    <div id="container" style="min-width: 400px; height: 600px"></div>
  </div>
</template>

<script>
import * as Highcharts from "highcharts/highstock";
export default {
  data: function () {
    return {
      month: [],
      data: [],
      series: [
        {
          name: "",
          data: [],
        },
      ],
    };
  },
  methods: {
    getData: function () {
      this.$axios({
        url: "/statistics/maintenance",
      }).then(({ data }) => {
        console.log(data.data);
        for (let i = 0; i < data.data.length; i++) {
          //月份数组

          if (this.month.includes(data.data[i].month)) {
            break;
          } else {
            this.month.push(data.data[i].month + "月");
          }
          //数据数组
        }

        var chart = Highcharts.chart("container", {
          chart: {
            type: "column",
          },
          title: {
            text: "",
          },
          subtitle: {
            text: "",
          },
          xAxis: {
            categories: this.month,
            crosshair: true,
          },
          yAxis: {
            min: 0,
            title: {
              text: "维修量（单）",
            },
          },
          tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat:
              '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat:
              '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
            footerFormat: "</table>",
            shared: true,
            useHTML: true,
          },
          plotOptions: {
            column: {
              borderWidth: 0,
            },
          },
          series: [
            {
              name: "维修一部",
              data: [4, 1],
            },
            {
              name: "维修二部",
              data: [2, 1],
            },
            {
              name: "维修三部",
              data: [3, 0],
            },
          ],
        });
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#mainExpSta {
  padding: 30px;
  h1 {
    padding-bottom: 40px;
  }
}
text.highcharts-root {
  display: none;
}
</style>